<template>
  <div class="main-box">
    <el-row justify="center">
        <el-col :span="18">
            <h1 v-show="orderData==0" class="show-message">暂无数据记录</h1>
            <ul>
              <li class="li" v-for="(item,index) in orderData" :key="index">
                  <div>
                    <img :src="item.path">
                  </div>
                  <div>
                    <p class="p1">{{ item.name }}</p>
                    <p class="p1 p2">￥：{{ item.price }}</p>
                    <p class="p1 p2">购买时间：{{ item.settime }}</p>
                  </div>
                  <div><p @click="delOrder(item,index)">删除</p></div>
              </li>
            </ul>
        </el-col>
    </el-row>
    <Footer/>
  </div>
</template>

<script>
import { ref,reactive, onMounted } from 'vue'
import axios from 'axios'
import Footer from '../views/Footer.vue'
import { ElMessage } from 'element-plus'
export default {
  components:{
    Footer
  },
  name: '',
  setup() {
    //获取令牌
    const token = ref()
    token.value = sessionStorage.getItem('token')
    //请求数据
    const orderData = ref([])
    const get1 = ()=>{
      axios.get('http://localhost:3000/order?flagNumber='+token.value).then(res=>{
        orderData.value = res.data
      })
    }
    get1()

    //删除订单
    const delOrder = (item,index)=>{
      orderData.value.splice(index,1)
      console.log(item.id);
      axios.delete('http://localhost:3000/order/'+item.id).then(res=>{
        ElMessage({
          showClose: true,
          message: '删除成功',
          center: true,
        })
      })
      //再次请求数据
      setTimeout(()=>{
        get1()
      },1000)
    }

    
    return {
      orderData,delOrder
    }
  },
}

</script>
<style scoped lang='scss'>
    .show-message{
      padding: 350px 0;
      text-align: center;
    }
    li{
      list-style: none;
      border:1px black solid;
      display: flex;
      margin-bottom: 5px;
      &:first-child{
        margin-top: 10px;
      }
      div:nth-child(1){
        width: 40%;
        img{
          width: 100%;
        }
      }
      div:nth-child(2){
        width: 55%;
        *{margin: 0;padding: 0;}
        .p1{
          font-size: 1.5em;
        }
        .p2{
          font-size: 1.2em;
        }
      }
      div:nth-child(3){
        display: flex;
        align-items: center;
        p{
          cursor: pointer;
        }
      }
    }
</style>